<template>
  <view class="page-wrapper">
    <view class="p-10" style="padding: 10px 60px; padding-top: 20vh;">
      <view>
        <view style="margin-bottom: 5px;" class="txt-info">登录名</view>
        <view>
          <u-input v-model="accountName" />
        </view>
      </view>
      <view class="m-t-10">
        <view style="margin-bottom: 5px;" class="txt-info">密码</view>
        <view>
          <u-input v-model="accountPwd" type="password" />
        </view>
      </view>
      <view class="m-t-10">
        <view style="margin-bottom: 5px;" class="txt-info">确认密码</view>
        <view>
          <u-input v-model="accountPwd2" type="password" />
        </view>
      </view>
      <view class="m-t-10">
        <view style="margin-bottom: 5px;" class="txt-info">所属门店</view>
        <view>
          <view @click="open" style="height: 20px; border: 1px solid #e2e2e2; line-height: 20px; padding: 10px;">{{ storeName }}</view>
        </view>
      </view>
      <view style="margin-top: 30px;">
        <view class="btn primary large" style="margin: 0px;" @click="signin" v-if="options.modify == 1">修改资料</view>
        <view class="btn primary large" style="margin: 0px;" @click="signin" v-else>注册</view>
      </view>
    </view>

    <u-picker :show="visible" :columns="columns" keyName="label" @cancel="visible = false" @confirm="confirm" />
  </view>
</template>

<script>
  import md5 from 'md5'
  import { setToken, setAccountName, setExpiration } from '@/utils/auth'
  export default {
    data() {
      return {
        options: {},
        accountName: '',
        accountPwd: '',
        accountPwd2: '',
        storeName: '',
        storeId: '',

        visible: false,
        columns: []
      }
    },
    onLoad(options) {
      this.options = options;

      this.$api.store.lookup()
      .then(res => {
        this.columns = [Object.keys(res.data).map((a) => {
          return {
            id: a,
            label: res.data[a]
          }
        })]
      })
    },
    methods: {
      open() {
        this.visible = true
      },
      confirm (val) {
        this.storeName = val.value[0].label
        this.storeId = val.value[0].id
        this.visible = false
      },
      cancel () {
        this.visible = false
      },
      signin() {
        if (this.accountPwd != this.accountPwd2) {
          uni.showModal({
            title: '提示',
            showCancel: false,
            content: '两次输入的密码不一致'
          })
          return;
        }
        if (!this.options.modify) {
          this.$api.access.signup({
            accountName: this.accountName,
            accountPwd: md5(this.accountPwd),
            storeId: this.storeId
          })
          .then(res => {
            if (res.code == 200) {
              let globalData = getApp({allowDefault: true}).globalData
              globalData.userName = res.data.accountName
              globalData.role = res.data.role
              setExpiration(+new Date() + ( 12 * 3600 * 1000 ))
              setToken(res.data.token)
              setAccountName(res.data.accountName)
              uni.redirectTo({ url: '/pages/home/home' })
            } else {
              uni.showModal({
                title: '提示',
                content: res.message,
                showCancel: false,
                success: ({ confirm, cancel }) => {}
              })
            }
          })
        } else {
          this.$api.access.updateProfile({
            accountName: this.accountName,
            accountPwd: md5(this.accountPwd),
            storeId: this.storeId
          })
          .then(res => {
            if (res.code == 200) {
              let globalData = getApp({allowDefault: true}).globalData
              globalData.userName = res.data.accountName
              globalData.role = res.data.role
              setExpiration(+new Date() + ( 12 * 3600 * 1000 ))
              setToken(res.data.token)
              setAccountName(res.data.accountName)
              uni.redirectTo({ url: '/pages/home/home' })
            } else {
              uni.showModal({
                title: '提示',
                content: res.message,
                showCancel: false,
                success: ({ confirm, cancel }) => {}
              })
            }
          })
        }
      }
    },
  }
</script>

<style lang="scss" scoped>
.page-wrapper {
  width: 100vw;
  height: 100vh;
  background: #ffffff;
}
</style>